<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="html_marry">
      <div class="top_out">
        <p class="p_left">
          <img @click="back" src="./img/1.png" alt="" />
        </p>
        <div class="p_rigth">
          <img src="./img/4.png" alt="" />
          <p style="color: white">|</p>
          <img src="./img/5.png" alt="" />
        </div>
      </div>
      <div class="img_horned">
        <img class="right_dian" src="./img/24.png" alt="" />
        <p style="font-size: 16px; font-weight: 600; margin-top: 25px">
          宝 贝 信 息
        </p>
        <p style="font-size: 14px; font-weight: 500; margin: 10px">
          信息仅用于故事匹配，请放心填写
        </p>
      </div>
      <div class="name_input">
        <img class="img_lian" src="./img/2.png" alt="" />
        <input class="bao_input" type="text" v-model="name" />
      </div>
      <div class="name_input">
        <img class="img_lian" src="./img/2.png" alt="" />
        <input class="bao_input" type="text" placeholder="gender" v-model="gender" />
        <span class="img_lian" :id="mans === 0 ? 'man' : ''">男</span>
        <span class="img_lian" :id="mans === 1 ? 'woman' : ''">女</span>
      </div>
      <div class="name_input">
        <img class="img_lian" src="./img/3.png" alt="" />
        <input class="bao_input" type="text" v-model="age" />
      </div>
      <div class="interest">
        <p style="font-size: 16px; font-weight: 600; margin-top: 20px">
          兴趣内容
        </p>
        <p style="font-size: 14px; font-weight: 500; margin: 10px">
          可多选，最多选择3个
        </p>
      </div>
      <div class="data_flex">
        <p
          :class="
            classIndex[0] === index ||
            classIndex[1] === index ||
            classIndex[2] === index
              ? 'list_p dian_it'
              : 'list_p'
          "
          @click="select(index)"
          v-for="(item, index) in dataList"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
      <div class="ok_p"  @click="butt">完成</div>
    </div>
    <alery v-if="falg" @no="no"></alery>
    {{ genders }}
  </div>
</template>
<script>
import alery from "./alery"
export default {
  name: "", 
  components:{
    alery
  },
  data() {
    return {
      msg: "测试",
      dataList: [
        "成长陪伴",
        "心理辅导",
        "防控抗议",
        "习惯培养",
        "唐诗三百首",
        "睡前故事",
      ],
      classIndex: [],
      mans: "",
      name: "宝贝姓名",
      gender: "宝贝性别",
      age: "宝贝年龄",
      falg:false,
    };
  },
  created() {},
  mounted() {},
  computed: {
    genders() {
      console.log(this.gender);

      if (this.gender === "男") {
        this.mans = 0;
        console.log(this.mans);
      }
      if (this.gender === "女") {
        this.mans = 1;
        console.log(this.mans);
      }
    },
  },
  methods: {
    // body_xing(){
    // },
    back(){
      this.$router.push({
        name:'home',
      })
    },
    butt(){
      this.$router.push({
        name:'home',
        params:{
          flag:true,
        }
      })
    },
    select(i) {
      let index = this.classIndex.findIndex((cur, index) => {
        return cur === i;
      });
      console.log(i);
      console.log(index);
      if (index > -1) {
        // console.log(index)
        this.classIndex.splice(index, 1);
      } else {
        if (this.classIndex.length < 3) {
          this.classIndex.push(i);
        } else {
          alert("最多可以选择三个兴趣内容,可以试着点击你选择的内容来取消");
        }
      }
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.html_marry {
  width: 414px;
  height: 736px;
  background: #f5c92c;
  position: absolute;
  top:0;
  left:0;
  z-index: 50;
}
.top_out {
  width: 380px;
  height: 45px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.p_rigth {
  width: 87px;
  height: 32px;
  border-radius: 20px;
  border: 1px solid white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#man {
  color: rgb(50, 228, 34);
}
#woman {
  color: rgb(111, 226, 17);
}
.img_horned {
  width: 100vw;
  text-align: center;
  color: aliceblue;
}
.right_dian {
  margin: 21px 0 0 50px;
  animation: mymove 700ms ;
}
@keyframes mymove {
  0% {
    transform: scale(0.9) rotate(-5deg);

  }
  15% {
    transform: scale(1) rotate(5deg);

  }
  30% {
    transform: scale(1.1) rotate(-5deg);

  }
  45% {
    transform: scale(1.1) rotate(5deg);

  }
  60% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.1) rotate(5deg);

  }
  90% {
    transform: scale(1.1) rotate(-5deg);

  }
  100% {
    transform: scale(1.1) rotate(5deg);
  }
}
.name_input {
  width: 350px;
  height: 40px;
  background: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin: 0 auto 15px;
}
.img_lian {
  margin-left: 10px;

}
.bao_input {
  margin-left: 20px;
  border: none;
  color: rgb(214, 210, 210);
  font-size: 16px;
  outline: none;
  width: 210px;
}
.interest {
  text-align: center;
  color: white;
}
.data_flex {
  width: 350px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
}
.list_p {
  width: 104px;
  height: 40px;
  background: white;
  color: rgb(214, 210, 210);
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
}
.ok_p {
  width: 350px;
  height: 40px;
  background: #ff006e;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 20px;
  color: white;
  text-align: center;
  line-height: 40px;
}
.dian_it {
  background: #0aceb0;
}
.hus {
  background: #0aceb0;
}
</style>